<template>
    <popup
        :show="showEdit"
        :title="popTitle"
        :loading="loading"
        :async-close="true"
        width="920px"
        @close="emits('close')"
        @confirm="handleSubmit"
    >
        <el-form
            ref="formRef"
            :model="formData"
            :rules="formRules"
            label-width="80px"
            class="p-3 pb-0"
        >
            <el-tabs v-model="currTabPane" type="border-card">
                <el-tab-pane name="basis" label="套餐信息" class="h-[600px]">
                    <el-scrollbar>
                        <settings v-model="formData" />
                    </el-scrollbar>
                </el-tab-pane>
<!--                <el-tab-pane name="model" label="模型特权" class="h-[600px]">-->
<!--                    <el-scrollbar>-->
<!--                        <limit-models v-model="formData" />-->
<!--                    </el-scrollbar>-->
<!--                </el-tab-pane>-->
                <el-tab-pane name="apply" label="应用特权" class="h-[600px]">
                    <el-scrollbar>
                        <limit-apply v-model="formData" />
                    </el-scrollbar>
                </el-tab-pane>
                <el-tab-pane name="specifics" label="权益列表" class="h-[600px]">
                    <el-scrollbar>
                        <specifics v-model="formData" />
                    </el-scrollbar>
                </el-tab-pane>
            </el-tabs>
        </el-form>
    </popup>
</template>

<script setup lang="ts">
import feedback from '@/utils/feedback'
import marketSubscribeApi from '@/api/market/subscribe'
import LimitApply from './_components/limit-apply.vue'
import Settings from './_components/settings.vue'
import Specifics from './_components/specifics.vue'

const emits = defineEmits(['success', 'close'])

const formRef = ref()
const showMode = ref<string>('add')
const showEdit = ref<boolean>(false)
const popTitle = computed<string>(() => {
    return showMode.value === 'edit' ? '编辑套餐' : '新增套餐'
})

// 当前面板
const currTabPane = ref('basis')

// 表单数据
const loading = ref<boolean>(false)
const formData: any = reactive({
    id: 0,              // 套餐ID
    name: '',           // 套餐名称
    description: '',    // 套餐描述
    train_num: 0,       // 训练条数
    robot_num: 0,       // 智能体数
    know_num: 0,        // 知识库数
    mcp_num: 0,         // MCP数
    sort: 0,            // 排序编号
    is_builtin: 0,      // 系统内置:[0=否, 1=是]
    is_disable: 0,      // 是否禁用:[0=否, 1=是]
    pricing_list: [],   // 定价列表
    specific_list: [],  // 权益列表
    apply_list: [],     // 应用权益
})

// 表单规则
const formRules: any = reactive({
    name: [
        { required: true, message: '请输入套餐名称', trigger: ['blur'] },
        { max: 100, message: '套餐名称不能大于100个字符', trigger: ['blur'] }
    ],
    description: [
        { max: 500, message: '套餐描述不能大于100个字符', trigger: ['blur'] }
    ]
})

/**
 * 提交表单
 *
 * @author zero
 */
const handleSubmit = async (): Promise<void> => {
    if (formData.pricing_list.length <= 0) {
        return feedback.msgError('至少需要1个套餐定价')
    }

    await formRef.value?.validate().then(async () => {
        loading.value = true
        if (showMode.value === 'edit') {
            await marketSubscribeApi.edit(formData)
                .finally(() => {
                    loading.value = false
                })
        } else {
            await marketSubscribeApi.add(formData)
                .finally(() => {
                    loading.value = false
                })
        }

        feedback.msgSuccess('操作成功')
        emits('close')
        emits('success')
    }).catch(() => {})
}

/**
 * 打开表单
 *
 * @param {string} type
 * @param {any} row
 * @returns {Promise<void>}
 */
const open = async (type: string, row?: any): Promise<void> => {
    showMode.value = type
    showEdit.value = true

    if (type === 'edit') {
        const data = await marketSubscribeApi.detail(row.id)
        for (const key in formData) {
            if (data[key] !== null && data[key] !== undefined) {
                formData[key] = data[key]
            }
        }
    } else {
        const data = await marketSubscribeApi.models()
        formData.apply_list = data.apply_list
    }
}

defineExpose({
    open
})
</script>
